<template>
  <el-container class="animate__animated animate__fadeIn ">
    <el-card style="background-color: rgba(255, 255, 255,1)" class="first-card">
      <div slot="header" class="total blog-info">
        <div class="user-info">
          <el-avatar size="small" :src="blog.avatar"></el-avatar>
          <a href="#" class="header">{{ blog.nickname }}</a>
        </div>
        <div class="blog-date">
          <i class="el-icon-date"></i>
          <span>{{ blog.createTime | dateFormat }}</span>
        </div>
        <div>
          <i class="el-icon-view"></i>
          <span>{{ blog.views }}</span>
        </div>
      </div>
      <el-image class="blog-pic" :src="blog.firstPicture"></el-image>
      <hr/>
      <h2 class="blog-title header">{{ blog.title }}
        <el-tag effect="plain" type="warning" style="font-weight: bold; font-size: small; margin-left: 20px">
          {{ blog.flag }}
        </el-tag>
      </h2>
      <mavon-editor class="typo m-padded-lr-responsive m-padded-tb-large"
                    v-html="blog.html" style="padding:20px">
      </mavon-editor>
      <div class="tags">
        <div class="tag-item" v-for="tag in blog.tagList" :key="tag.id">
          <div class="sjx-outer">
            <div class="sjx-inner"></div>
          </div>
          <div class="tag">
            {{ tag.name }}
          </div>
        </div>
      </div>
      <div class="appreciate">
        <el-popover
            placement="bottom"
            title=""
            width="300"
            trigger="hover"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
          <div class="give-money">
            <div class="give-money-item">
              <el-image :src="wechart" title="微信支付"></el-image>
              <p>微信</p>
            </div>
            <div class="give-money-item">
              <el-image :src="alipay" title="支付宝支付"></el-image>
              <p>支付宝</p>
            </div>
          </div>
          <el-button class="zanshang" slot="reference" type="danger" round plain v-if="show_real()">赞赏</el-button>
        </el-popover>
      </div>
      <div class="author">
        <ul>
          <li>作者 {{ blog.nickname }}</li>
          <li>发表时间 {{ blog.createTime | dateFormat }}</li>
        </ul>
      </div>
      <div v-if="show_real()">
        <el-card shadow="never" class="comments">
          <div class="header">
            评论
          </div>
          <div v-for="item in list" :key="item.id">
            <comment :info="item" :uid="blog.uid" :rp-active-id="replyActiveId"></comment>
            <reply style="margin-left: 60px" v-if="replyActiveId == item.id" :info='item' :rootCommentId="item.id"
                   @quit="onReplyCancel" @complete="onReplyComplete"></reply>
            <div class="dflex" style="margin-left: 60px" v-if="replyActiveId != item.id">
              <el-button size="mini" type="text" v-if="userInfo && userInfo.id != item.uid"
                         @click=" showReply(item.id)">回复
              </el-button>
              <el-button size="mini" type="text" style="color: #999999;margin-left: auto"
                         v-if="administrator || (userInfo && item.uid == userInfo.id)"
                         @click="handleDelComment(item.id)">删除
              </el-button>
            </div>
            <div v-if="!item.isShowChildren&&item.children&&item.children.length"
                 @click="showItem(item)"
                 class="v_cursor v_more_reply"
            >共 {{ item.children.length }} 条回复 >>
            </div>
            <div v-if="item.isShowChildren" class="v_item_re">
              <div v-for="children in item.children" :key="children.id">
                <comment :info="children" :uid="blog.uid" :rp-active-id="replyActiveId"></comment>
                <reply style="margin-left: 40px" v-if="replyActiveId === children.id" :info='children'
                       :rootCommentId="item.id"
                       @quit="onReplyCancel" @complete="onReplyComplete"></reply>
                <div class="dflex" style="margin-left: 60px" v-if="replyActiveId != children.id">
                  <el-button size="mini" type="text" v-if="userInfo &&userInfo.id!=children.uid"
                             @click="showReply(children.id) ">回复
                  </el-button>
                  <el-button size="mini" type="text" style="color: #999999;margin-left: auto"
                             v-if=" administrator || (userInfo && children.uid == userInfo.id)"
                             @click="handleDelComment(children.id)">删除
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="queryParams.pageSize"
            :current-page="queryParams.pageNum"
            :total="total">
        </el-pagination>
        <el-form class="commmet-reply" :model="formData" :rules="formRules" ref="formRef">
          <el-form-item prop="content">
            <el-input v-model="formData.content" :validate-event="false" type="textarea"
                      class="write-commmet" :rows="6">
            </el-input>
          </el-form-item>
          <div class="submit">
            <el-button prefix-icon="el-icon-submit" type="primary" class="item" @click="handleAddComment()">
              <i class="el-icon-edit"></i> 提交
            </el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </el-container>
</template>

<script>
import Prism from '../../plugins/prism'
import Login from "../login/Login.vue";
import Comment from "./comment/Comment.vue";
import Reply from "./comment/Reply.vue";
import { mapState } from 'vuex'
import { curr_evn, show_real } from '../../config/envConfig'
import { reqReportView, reqBlogInfo, reqCommentList } from '../../api/touristApi'
import { reqAddComment, reqDelComment } from '@/api/consumerApi'

const defQuery = () => {
  return {
    kwd: '',
    pageNum: 1,
    pageSize: 10
  }
}
export default {
  components: {
    Login, Prism, Comment, Reply
  },
  data() {
    return {
      openList: [],
      queryParams: defQuery(),
      blogId: 0,
      replyActiveId: -1,
      blog: {},
      wechart: `${ curr_evn.imageUrl }/ic_banner_10.jpg`,
      alipay: `${ curr_evn.imageUrl }/ic_banner_10.jpg`,
      formData: {
        content: ''
      },
      formRules: {
        content: [
          { required: true, message: "评论内容不能为空！" },
          { min: 0, max: 100, message: "评论内容不超过100字！" }
        ]
      },
      list: [],
      total: 0
    }
  },
  created() {
    this.blogId = this.$route.query.id
    this.reportView()
    this.getInfo()
    this.getList()
  },
  computed: {
    ...mapState('user', [
      'isLogin',
      'userInfo',
      'administrator',
    ])
  },
  methods: {
    show_real() {
      return show_real
    },
    // 获取博客详情信息
    getInfo() {
      reqBlogInfo(this.blogId).then(data => {
        this.blog = data
      })
    },
    getList() {
      reqCommentList({
        blogId: this.blogId,
        ...this.queryParams
      }).then(data => {
        data.list.forEach(it => {
          it.isShowChildren = this.openList.includes(it.id)
        })
        this.list = data.list
        this.total = data.total
      })
    },
    // 提交评论
    handleAddComment() {
      this.$refs.formRef.validate(valid => {
        if (!valid) return
        let params = {
          content: this.formData.content,
          blogId: this.blogId,
          rootCommentId: 0,
          toCommentId: 0,
        }
        reqAddComment(params).then(data => {
          this.$message.success("发表评论成功")
          this.$refs.formRef.resetFields()
          this.recordOpen()
          this.getList()
        })
      })
    },
    recordOpen() {
      this.openList = []
      this.list.forEach(it => {
        if (it.isShowChildren) {
          this.openList.push(it.id)
        }
      })
    },
    // 删除评论
    handleDelComment(id) {
      this.$confirm(
          '确认删除?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        reqDelComment(id).then(data => {
          this.$message.success('删除成功！')
          this.recordOpen()
          this.getList()
        })
      })
    },
    reportView() {
      reqReportView(this.blogId)
    },
    showItem(item) {
      item.isShowChildren = true
    },
    onReplyComplete(val) {
      this.replyActiveId = -1
      this.recordOpen()
      this.getList()
    },
    showReply(value) {
      if (!this.isLogin) {
        this.$message.warning("请先登录")
        return
      }
      this.replyActiveId = value
    },
    onReplyCancel() {
      this.replyActiveId = -1
    },
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum
      this.openList = []
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.openList = []
      this.getList()
    },
  },

}
</script>

<style scoped lang="less">


.el-card {
  width: 100%;
}

.el-popper /deep/ {
  box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%),
}

.first-card {
  border-radius: 10px 10px 0 0;
  position: relative;
  padding-bottom: 100px;
  /*text-align: center;*/
  font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;

  .blog-pic {
    border-radius: 8px;
  }
}

hr.style-one {
  width: 100%;
  background-image: linear-gradient(to right, rgba(64, 158, 255, 0), rgba(64, 158, 255, 0.75), rgba(64, 158, 255, 0));
}

.v_item_re {
  margin-left: 60px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #f9f6f6;
  border-radius: 8px;
}

.commmet-reply {
  position: relative;

  .auth-info {
    position: absolute;
    left: 0;
  }

  .submit {
    text-align: center;
  }

}

.appreciate {
  text-align: center;
}

.give-money {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #409eff;
  border-radius: 10px;

  .give-money-item {
    border-radius: 10px;
    padding: 10px;
    width: 50%;
    text-align: center;

    .el-image {
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-left: 5px;
      margin-right: 5px;
    }

    p {
      font-size: smaller;
      font-weight: bold;
      color: #3a8ee6;
      display: block;
      line-height: 20px;
      margin: 0;
    }
  }
}

.tags {
  display: flex;
  align-items: center;
  margin-left: 50px;
}

.tag-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 10px;
  margin-bottom: 20px;
}

.tag {
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  background-color: #ecf5ff;
  border: 1px solid #409eff;
  color: #409eff;
  display: flex;
}

.sjx-outer {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #409eff;
  position: relative;
}

.sjx-inner {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #ecf5ff;
  top: -7px;
  left: 1px;
  position: absolute;
}

.author {
  text-align: left;
  background-color: #fcfff5;
  box-shadow: 0 0 0 1px #a3c293 inset;
  color: #2c662d;
  width: 100%;
  position: absolute;
  left: 0;
  margin: 20px 0;
  padding: 20px 0;
  font-size: small;
  font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}

.comments {
  margin-top: 150px;
  box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
  border: 1px solid rgba(34, 36, 38, .15);
  border-top: 2px solid #409EFF;
  text-align: left;

  .reply {
    margin-right: 10px;
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
  }

  .reply:hover {
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
  }

  .delete {
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
  }

  .delete:hover {
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
  }


  .header {
    font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.28571429rem;
    color: rgba(0, 0, 0, .87);
  }

}

.v_more_reply {
  color: #333333;
  font-size: 13px;
  margin-left: 40px;
  margin-bottom: 10px;
  width: 120px;
  margin-top: 10px;
  border: 1px solid #0CABFF;
  border-radius: 8px;
  text-align: center;
}

.write-commmet {
  margin-top: 20px;
}

.blog-pic {
  width: 100%;
}

.blog-title {
  text-align: center;
}

.blog-info {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, .4);
  font-size: 13px;

  .blog-date {
    margin-right: 5px;
  }

  .user-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 15px;

    .el-avatar {
      margin-right: 5px;
      width: 22px;
      height: 22px;
    }

    .header {
      text-decoration: none;
      color: #3a8ee6;
      font-weight: bold;
    }
  }
}

@media screen and (max-width: 768px) {
  .tags {
    margin-left: 0;
  }

  hr {
    display: none;
  }

  .comment-content {
    font-size: 12px !important;
  }
}

@media only screen and (max-width: 480px) {
  h2 {
    font-weight: normal;
  }

  code, pre {
    font-size: 13px !important;
  }
}
</style>
